<template>
<div class="product-list">
  <el-table :data="productTableData" style="width: 1200px;margin-left: 2%">
    <el-table-column prop="imageUrl" label="商品图" width="120">
      <template #default="{ row }">
        <img :src="row.imageUrl" style="width: 100%; height: auto;">
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商品名" width="180"></el-table-column>
    <el-table-column prop="price" label="价格" width="140"></el-table-column>
    <el-table-column prop="brand" label="品牌" width="120"></el-table-column>
    <el-table-column prop="applyAge" label="适用范围" width="120"></el-table-column>
    <el-table-column label="其他操作" width="100">
      <template #default="{ row }">
        <el-button type="danger" @click="handleDeleteProduct(row)">取消收藏</el-button>
      </template>
    </el-table-column>
  </el-table>

<!--  <el-pagination-->
<!--    :current-page="currentPage"-->
<!--    :page-size="pageSize"-->
<!--    :total="total"-->
<!--    layout="total, prev, pager, next, jumper"-->
<!--    @current-change="handlePageChange"-->
<!--  />-->
</div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import type { Product } from "@/common/types/goodsType";
import {
  getFavoriteProductList,
  deleteFavoriteProduct
} from '@/common/net/api';
// 收藏商品相关数据
const productTableData = ref([]);
const productCurrentPage = ref(1);
const productPageSize = ref(10);
const productTotal = ref(0);


// 获取收藏商品列表
const fetchProductList = async () => {
  try {
    const response = await getFavoriteProductList(productCurrentPage.value, productPageSize.value);
    productTableData.value = response.data.records
    productTotal.value = response.data.total;
  } catch (error) {
    ElMessage.error('获取收藏商品列表失败');
  }
};


// 删除收藏商品
const handleDeleteProduct = async (row) => {
  console.log(row)
  try {
    await deleteFavoriteProduct(row.productId).then(res=>{
      if (res.data.state) {
        ElMessage.success('取消收藏成功');
        productTableData.value = productTableData.value.filter(item => item.favoriteProductId!== row.favoriteProductId);
      } else {
        ElMessage.error(response.data.msg);
      }
    })

  } catch (error) {
    ElMessage.error('取消收藏失败');
  }
};

// 处理收藏商品每页显示数量变化
const handleProductSizeChange = (newSize) => {
  productPageSize.value = newSize;
  fetchProductList();
};

// 处理收藏商品当前页码变化
const handleProductCurrentChange = (newPage) => {
  productCurrentPage.value = newPage;
  fetchProductList();
};
onMounted(() => {
  fetchProductList();
});
</script>

<style scoped>
</style>
